<div class="dropdown">
    <div class="dropbtn">
        <ng-container [ngSwitch]="today.weather">
            <!--晴-->
            <div *ngSwitchCase="'sunny'" class="icon sunny" style="transform: scale(0.5, 0.5);left:-50px">
                <div class="sun">
                    <div class="rays"></div>
                </div>
                <div class="weather-report" style="position: absolute; transform: scale(1.5, 1.5); left: 200px; top:40px; color: whitesmoke">
                    <div>
                        <b>{{today.week}}&nbsp;&nbsp;{{today.date}}</b>
                    </div>
                    <div>
                        <b>{{today.weatherDesc}}</b> &nbsp;&nbsp;{{today.temperature}}</div>
                    <div>{{today.wind}}</div>
                </div>
            </div>
            <!--多云-->
            <div *ngSwitchCase="'cloudy'" class="icon cloudy" style="transform: scale(0.5, 0.5);left:-50px">
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="weather-report" style="position: absolute; transform: scale(1.5, 1.5); left: 200px; top:40px; color: whitesmoke">
                    <div>
                        <b>{{today.week}}&nbsp;&nbsp;{{today.date}}</b>
                    </div>
                    <div>
                        <b>{{today.weatherDesc}}</b> &nbsp;&nbsp;{{today.temperature}}</div>
                    <div>{{today.wind}}</div>
                </div>
            </div>
            <!--晴雨-->
            <div *ngSwitchCase="'sun-shower'" class="icon sun-shower" style="transform: scale(0.5, 0.5);left:-50px">
                <div class="cloud"></div>
                <div class="sun">
                    <div class="rays"></div>
                </div>
                <div class="rain"></div>
                <div class="weather-report" style="position: absolute; transform: scale(1.5, 1.5); left: 200px; top:40px; color: whitesmoke">
                    <div>
                        <b>{{today.week}}&nbsp;&nbsp;{{today.date}}</b>
                    </div>
                    <div>
                        <b>{{today.weatherDesc}}</b> &nbsp;&nbsp;{{today.temperature}}</div>
                    <div>{{today.wind}}</div>
                </div>
            </div>
            <!--雨-->
            <div *ngSwitchCase="'rainy'" class="icon rainy" style="transform: scale(0.5, 0.5);left:-50px">
                <div class="cloud"></div>
                <div class="rain"></div>
                <div class="weather-report" style="position: absolute; transform: scale(1.5, 1.5); left: 200px; top:40px; color: whitesmoke">
                    <div>
                        <b>{{today.week}}&nbsp;&nbsp;{{today.date}}</b>
                    </div>
                    <div>
                        <b>{{today.weatherDesc}}</b> &nbsp;&nbsp;{{today.temperature}}</div>
                    <div>{{today.wind}}</div>
                </div>
            </div>
            <!--风雪-->
            <div *ngSwitchCase="'flurries'" class="icon flurries" style="transform: scale(0.5, 0.5);left:-50px">
                <div class="cloud"></div>
                <div class="snow">
                    <div class="flake"></div>
                    <div class="flake"></div>
                </div>
                <div class="weather-report" style="position: absolute; transform: scale(1.5, 1.5); left: 200px; top:40px; color: whitesmoke">
                    <div>
                        <b>{{today.week}}&nbsp;&nbsp;{{today.date}}</b>
                    </div>
                    <div>
                        <b>{{today.weatherDesc}}</b> &nbsp;&nbsp;{{today.temperature}}</div>
                    <div>{{today.wind}}</div>
                </div>
            </div>
            <!--雷雨-->
            <div *ngSwitchCase="'thunder-storm'" class="icon thunder-storm" style="transform: scale(0.5, 0.5);left:-50px">
                <div class="cloud"></div>
                <div class="lightning">
                    <div class="bolt"></div>
                    <div class="bolt"></div>
                </div>
                <div class="weather-report" style="position: absolute; transform: scale(1.5, 1.5); left: 200px; top:40px; color: whitesmoke">
                    <div>
                        <b>{{today.week}}&nbsp;&nbsp;{{today.date}}</b>
                    </div>
                    <div>
                        <b>{{today.weatherDesc}}</b> &nbsp;&nbsp;{{today.temperature}}</div>
                    <div>{{today.wind}}</div>
                </div>
            </div>
        </ng-container>
    </div>
    <div class="dropdown-content">

        <a href="javascript:viod(0)" *ngFor="let w of weathers">
            <ng-container [ngSwitch]="w.weather">
                <!--晴-->
                <div *ngSwitchCase="'sunny'" class="icon sunny" style="transform: scale(0.5, 0.5);top:-50px;left:-50px">
                    <div class="sun">
                        <div class="rays"></div>
                    </div>
                    <div class="weather-report" style="position: absolute; transform: scale(1.5, 1.5); left: 200px; top:40px; color: whitesmoke">
                        <div>
                            <b>{{w.week}}&nbsp;&nbsp;{{w.date}}</b>
                        </div>
                        <div>
                            <b>{{w.weatherDesc}}</b> &nbsp;&nbsp;{{w.temperature}}</div>
                        <div>{{w.wind}}</div>
                    </div>
                </div>
                <!--多云-->
                <div *ngSwitchCase="'cloudy'" class="icon cloudy" style="transform: scale(0.5, 0.5);top:-50px;left:-50px">
                    <div class="cloud"></div>
                    <div class="cloud"></div>
                    <div class="weather-report" style="position: absolute; transform: scale(1.5, 1.5); left: 200px; top:40px; color: whitesmoke">
                        <div>
                            <b>{{w.week}}&nbsp;&nbsp;{{w.date}}</b>
                        </div>
                        <div>
                            <b>{{w.weatherDesc}}</b> &nbsp;&nbsp;{{w.temperature}}</div>
                        <div>{{w.wind}}</div>
                    </div>
                </div>
                <!--晴雨-->
                <div *ngSwitchCase="'sun-shower'" class="icon sun-shower" style="transform: scale(0.5, 0.5);top:-50px;left:-50px">
                    <div class="cloud"></div>
                    <div class="sun">
                        <div class="rays"></div>
                    </div>
                    <div class="rain"></div>
                    <div class="weather-report" style="position: absolute; transform: scale(1.5, 1.5); left: 200px; top:40px; color: whitesmoke">
                        <div>
                            <b>{{w.week}}&nbsp;&nbsp;{{w.date}}</b>
                        </div>
                        <div>
                            <b>{{w.weatherDesc}}</b> &nbsp;&nbsp;{{w.temperature}}</div>
                        <div>{{w.wind}}</div>
                    </div>
                </div>
                <!--雨-->
                <div *ngSwitchCase="'rainy'" class="icon rainy" style="transform: scale(0.5, 0.5);top:-50px;left:-50px">
                    <div class="cloud"></div>
                    <div class="rain"></div>
                    <div class="weather-report" style="position: absolute; transform: scale(1.5, 1.5); left: 200px; top:40px; color: whitesmoke">
                        <div>
                            <b>{{w.week}}&nbsp;&nbsp;{{w.date}}</b>
                        </div>
                        <div>
                            <b>{{w.weatherDesc}}</b> &nbsp;&nbsp;{{w.temperature}}</div>
                        <div>{{w.wind}}</div>
                    </div>
                </div>
                <!--风雪-->
                <div *ngSwitchCase="'flurries'" class="icon flurries" style="transform: scale(0.5, 0.5);top:-50px;left:-50px">
                    <div class="cloud"></div>
                    <div class="snow">
                        <div class="flake"></div>
                        <div class="flake"></div>
                    </div>
                    <div class="weather-report" style="position: absolute; transform: scale(1.5, 1.5); left: 200px; top:40px; color: whitesmoke">
                        <div>
                            <b>{{w.week}}&nbsp;&nbsp;{{w.date}}</b>
                        </div>
                        <div>
                            <b>{{w.weatherDesc}}</b> &nbsp;&nbsp;{{w.temperature}}</div>
                        <div>{{w.wind}}</div>
                    </div>
                </div>
                <!--雷雨-->
                <div *ngSwitchCase="'thunder-storm'" class="icon thunder-storm" style="transform: scale(0.5, 0.5);top:-50px;left:-50px">
                    <div class="cloud"></div>
                    <div class="lightning">
                        <div class="bolt"></div>
                        <div class="bolt"></div>
                    </div>
                    <div class="weather-report" style="position: absolute; transform: scale(1.5, 1.5); left: 200px; top:40px; color: whitesmoke">
                        <div>
                            <b>{{w.week}}&nbsp;&nbsp;{{w.date}}</b>
                        </div>
                        <div>
                            <b>{{w.weatherDesc}}</b> &nbsp;&nbsp;{{w.temperature}}</div>
                        <div>{{w.wind}}</div>
                    </div>
                </div>
            </ng-container>
        </a>
    </div>
</div>